<template>
    <div class="detail-container">
        <!-- 服务单信息-->
        <el-card shadow="never" class="standard-margin">
            <span class="font-title-medium">订单信息</span>
            <div class="form-container-border">
                <el-row>
                    <el-col :span="6" class="form-border form-left-bg font-small">订单编号</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderDetail.orderSn}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="form-border form-left-bg font-small">订单金额</el-col>
                    <el-col class="form-border font-small" :span="18">￥{{orderDetail.orderAmount}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">支付方式</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderDetail.payType|formatPayType}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">支付时间</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderDetail.payTime|formatTime}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">订单状态</el-col>
                    <el-col class="form-border font-small" :span="18">已完成</el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 对账信息-->
        <el-card shadow="never" class="standard-margin">
            <span class="font-title-medium">对账信息</span>
            <div class="form-container-border">
                <el-row>
                    <el-col :span="6" class="form-border form-left-bg font-small">对账状态</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderDetail.checkStatus|formatStatus}}</el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>
<script>
    import {checkOrderDetail} from '@/api/order'
    import {formatDate} from '@/utils/date';

    export default {
        name: 'returnApplyDetail',
        data() {
            return {
                orderDetail: {},
            }
        },
        created() {
            this.id = this.$route.query.id;
            this.getDetail();
        },
        computed: {},
        filters: {
            formatPayType(value) {
                if (value === 2) {
                    return '支付宝';
                } else if (value === 1) {
                    return '微信';
                }
            },
            formatStatus(status) {
                if (status === 0) {
                    return "待处理";
                } else if (status === 1) {
                    return "退货中";
                } else if (status === 2) {
                    return "已完成";
                } else {
                    return "已拒绝";
                }
            },
            formatTime(time) {
                if (time == null || time === '') {
                    return 'N/A';
                }
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
        },
        methods: {
            getDetail() {
                checkOrderDetail({id: this.id}).then(response => {
                    this.orderDetail = response.data;
                });
            },
        }
    }
</script>
<style scoped>
    .detail-container {
        position: absolute;
        left: 0;
        right: 0;
        width: 1080px;
        padding: 35px 35px 15px 35px;
        margin: 20px auto;
    }

    .standard-margin {
        margin-top: 15px;
    }

    .form-border {
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
    }

    .form-container-border {
        border-left: 1px solid #DCDFE6;
        border-top: 1px solid #DCDFE6;
        margin-top: 15px;
    }

    .form-left-bg {
        background: #F2F6FC;
    }
</style>


